<template>
    <div>
        <NavTop></NavTop>  
        <div style="width: 1400px;margin: auto;">
            <el-table
            ref="multipleTableRef"
            :data="cartData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
                    >
            <el-table-column type="selection" :selectable="selectable" width="55" />
            <el-table-column property="id" label="商品编号" width="120"/>
            <el-table-column property="name" label="商品名称" width="300" />
            <el-table-column property="onlineprice" label="价格" />
            <el-table-column property="num" label="数量" />
            <el-table-column property="total" label="总价格" />
            <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
            <template #default="scope">
                <el-button size="small" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
            </template>
            </el-table-column>
            </el-table>
            <div style="margin-top: 20px;right: 100%;">
                <el-button @click="buy()">购买</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import NavTop from '../../components/NavTop.vue'
import { useGoodsStore } from '@/store/goods';
import { ElMessageBox,ElMessage } from 'element-plus'


export default {
    components:{
        NavTop
    },
    data() {
        return {
            multipleTableRef:null,
            multipleSelection:[],
            store:useGoodsStore(),
            cartData:JSON.parse(sessionStorage.getItem('cart')),
            time:new Date(),
            orderID:''
        }
    },
    methods: {
        handleSelectionChange(val){
            this.multipleSelection = val
        },
        handleDelete(index){
            ElMessageBox.confirm(
                '不买了？',
                '提示',
                {
                confirmButtonText: '没钱买个单',
                cancelButtonText: '算了',
                type: 'danger',
                })
                .then(() => {
                    this.cartData.splice(index,1)//把当前行数据进行删除，注意我们只是在数组里进行删除，sessionStorage不变
                    //更新sessionStorage
                    sessionStorage.setItem('cart',JSON.stringify(this.cartData))
                })
                .catch(() => {
                ElMessage({
                    type: 'success',
                    message: '钱包-???$',
                })
                })

            // this.cartData.splice(index,1)//把当前行数据进行删除，注意我们只是在数组里进行删除，sessionStorage不变
            // //更新sessionStorage
            // sessionStorage.setItem('cart',JSON.stringify(this.cartData))

            
        },
        buy(){
            if(this.multipleSelection ==''){
                ElMessageBox.alert('不买东西？？？', {
                confirmButtonText: 'OK',
                callback: () => {
                ElMessage({
                    
                })
                }},)
            }else{
            this.orderID=this.time.getFullYear().toString() + (this.time.getMonth()+1).toString()+
            this.time.getDate().toString() +  Math.random().toString().slice(2,10),
            console.log(this.orderID);
            let num = 0
            let sum = 0
            //从选中的商品中进行遍历循环，把每个商品的数量金额叠加
            this.multipleSelection.map(v=>{
                num += v.num
                sum += parseInt(v.total)
            })
            //打印检查数据是否正确
            console.log("num"+num);
            console.log("sum"+sum);
            //把相关的数据添加到store中的订单数组里
            this.store.orderAdd({
                orderID:this.orderID,
                time:this.time,
                num:num,
                sum:sum,
                isOrdered:false,//这个变量用来记录本订单是否完成支付
                child:[...this.multipleSelection],//...展开运算符，通常用来把一个数组逐一进行操作相当于进行了循环
            })
            //过程性检查，订单数据是否已经传递
            console.log(this.store.orderData);
            ElMessageBox.alert('已加入订单', {
                confirmButtonText: 'OK',
                callback: () => {
                ElMessage({
                    type: 'success',
                    message:'添加成功',
                })
                //商品添加订单后，从购物小车中删除
                this.multipleSelection.forEach((list)=>{
                    let x = this.cartData.findIndex((item)=>list.id == item.id)
                    this.cartData.splice(x,1)
                    sessionStorage.setItem('cart',JSON.stringify(this.cartData))
                })
                }
                },
                )
            }},
    
    }  
}
</script>